<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="培训" data-page-identification="r_r40a0k0zas">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_hludvvyuwr 自定义模板_e9v1m4bggb -->
          <div v-if="gifVisible" class="fullscreen-animation">
            <img :src="gifSrc" alt="animation" @load="onGifLoad" />
          </div>
            <a-modal
                v-model:visible="faqState.visible"
                :title="faqState.modalTitle"
                width="800px"
                @ok="handlerConfirm"
                :body-style="{ maxHeight: '600px', overflowY: 'auto' }"
                destroy-on-close
                @cancel="faqCancel"
            >
                <div class="my-page">
                    <a-form ref="faqRef" :model="faqState.faqModel">
                        <a-row class="one-line">
                            <a-col :span="24">
                                <a-form-item
                                    label="模板名称"
                                    :rules="[{ required: true, message: '请选择模板', trigger: 'blur' }]"
                                    name="templateCode"
                                >
                                    <a-select
                                        show-search
                                        placeholder="请选择"
                                        v-model:value="faqState.faqModel.templateCode"
                                        @focus="getTemplate"
                                        :options="faqState.templateList"
                                        style="width: 100%"
                                        :field-names="{ label: 'templateName', value: 'templateId' }"
                                        @change="faqTpChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row class="one-line">
                            <a-col :span="12">
                                <a-form-item
                                    label="项目阶段"
                                    :rules="[{ required: true, message: '请选择项目阶段', trigger: 'blur' }]"
                                    name="stageSerialNumber"
                                >
                                    <a-select
                                        show-search
                                        placeholder="请选择"
                                        @focus="getMilepost"
                                        v-model:value="faqState.faqModel.stageSerialNumber"
                                        :options="faqState.miltpostList"
                                        :field-names="{ label: 'stageName', value: 'serialNumber' }"
                                        @change="faqMlChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="任务名称"
                                    :rules="[{ required: true, message: '请选择任务名称', trigger: 'blur' }]"
                                    name="taskSerialNumber"
                                >
                                    <a-select
                                        show-search
                                        @focus="getTask"
                                        placeholder="请选择"
                                        v-model:value="faqState.faqModel.taskSerialNumber"
                                        :options="faqState.taskList"
                                        :field-names="{ label: 'taskName', value: 'serialNumber' }"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div class="line-box"></div>
                        <div class="faq-title"
                            ><div class="question-img"
                                ><svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="16px"
                                    height="16px"
                                    viewBox="0 0 16 16"
                                    version="1.1"
                                >
                                    <title>问题现象</title>
                                    <g id="页面-弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="新建/编辑FAQ（宽度720px）" transform="translate(-25, -279)">
                                            <g id="编组-6" transform="translate(24, 277)">
                                                <g id="编组-3" transform="translate(1, 0)">
                                                    <g id="问题现象" transform="translate(0, 2)">
                                                        <rect id="矩形" x="0" y="0" width="16" height="16" />
                                                        <g id="编组" transform="translate(2, 2)">
                                                            <path
                                                                d="M11,0 L1,0 C0.447716667,0 0,0.447716667 0,1 L0,11 C0,11.5523 0.447716667,12 1,12 L11,12 C11.5523,12 12,11.5523 12,11 L12,1 C12,0.447716667 11.5523,0 11,0 Z"
                                                                id="路径"
                                                                stroke="#3875FF"
                                                                fill="#3875FF"
                                                                stroke-linejoin="round"
                                                            />
                                                            <path
                                                                d="M6,7.54166667 L6,6.20833333 C7.10456667,6.20833333 8,5.3129 8,4.20833333 C8,3.10376667 7.10456667,2.20833333 6,2.20833333 C4.89543333,2.20833333 4,3.10376667 4,4.20833333"
                                                                id="路径"
                                                                stroke="#FFFFFF"
                                                                stroke-linecap="round"
                                                                stroke-linejoin="round"
                                                            />
                                                            <path
                                                                d="M6,10.5416667 C6.46023333,10.5416667 6.83333333,10.1685667 6.83333333,9.70833333 C6.83333333,9.2481 6.46023333,8.875 6,8.875 C5.53976667,8.875 5.16666667,9.2481 5.16666667,9.70833333 C5.16666667,10.1685667 5.53976667,10.5416667 6,10.5416667 Z"
                                                                id="路径"
                                                                fill="#FFFFFF"
                                                            />
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g></svg
                            ></div>
                            问题现象
                        </div>
                        <a-col :span="24">
                            <a-form-item
                                label="现象发现方"
                                :rules="[{ required: true, message: '请输入现象发现方', trigger: 'blur' }]"
                                name="discoveredBy"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.discoveredBy" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item
                                label="具体现象"
                                :rules="[{ required: true, message: '请输入具体现象', trigger: 'blur' }]"
                                name="phenomenon"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.phenomenon" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item
                                label="导致结果"
                                :rules="[{ required: true, message: '请输入导致结果', trigger: 'blur' }]"
                                name="result"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.result" />
                            </a-form-item>
                        </a-col>
                        <!--可能原因-->
                        <div class="faq-title"
                            ><div class="reson-img"
                                ><svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="16px"
                                    height="17px"
                                    viewBox="0 0 16 17"
                                    version="1.1"
                                >
                                    <title>可能原因</title>
                                    <g id="页面-弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="新建/编辑FAQ（宽度720px）" transform="translate(-25, -532)">
                                            <g id="编组-6" transform="translate(24, 277)">
                                                <g id="可能原因" transform="translate(1, 255.5)">
                                                    <rect id="矩形" x="0" y="0" width="16" height="16" />
                                                    <g id="编组-4" transform="translate(2.2, 1)">
                                                        <g id="编组" fill="#3875FF" stroke-linejoin="round">
                                                            <path
                                                                d="M3.15,1.05 L2.8,1.05 L0.7,1.05 C0.3134005,1.05 0,1.3634005 0,1.75 L0,13.3 C0,13.68661 0.3134005,14 0.7,14 L10.5,14 C10.88661,14 11.2,13.68661 11.2,13.3 L11.2,1.75 C11.2,1.3634005 10.88661,1.05 10.5,1.05 L8.767465,1.05 L8.05,1.05"
                                                                id="路径"
                                                                stroke="#3875FF"
                                                                stroke-linecap="round"
                                                            />
                                                            <rect
                                                                id="矩形"
                                                                stroke="#FFFFFF"
                                                                x="3.15"
                                                                y="0"
                                                                width="4.9"
                                                                height="2.1"
                                                            />
                                                        </g>
                                                        <line
                                                            x1="5.6"
                                                            y1="4.2"
                                                            x2="5.6"
                                                            y2="8.86666667"
                                                            id="路径"
                                                            stroke="#FFFFFF"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M5.6,11.6984988 C6.0639152,11.6984988 6.44,11.2784988 6.44,10.8584988 C6.44,10.4384988 6.02,10.0184988 5.6,10.0184988 C5.18,10.0184988 4.76,10.3945836 4.76,10.8584988 C4.76,11.322414 5.1360848,11.6984988 5.6,11.6984988 Z"
                                                            id="路径"
                                                            fill="#FFFFFF"
                                                        />
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g></svg
                            ></div>
                            可能原因
                        </div>
                        <a-col :span="24">
                            <a-form-item
                                label="现象原因方"
                                :rules="[{ required: true, message: '请输入现象原因方', trigger: 'blur' }]"
                                name="phenomenonReason"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.phenomenonReason" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item
                                label="可能原因"
                                :rules="[{ required: true, message: '请输入可能原因', trigger: 'blur' }]"
                                name="possibleReason"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.possibleReason" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item
                                label="原因特征"
                                :rules="[{ required: true, message: '请输入原因特征', trigger: 'blur' }]"
                                name="reasonFeature"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.reasonFeature" />
                            </a-form-item>
                        </a-col>
                        <!--可能原因-->
                        <!--      解决SOP和标准动作-->
                        <div class="faq-title">
                            <div class="sop-img"
                                ><svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="17px"
                                    height="18px"
                                    viewBox="0 0 17 18"
                                    version="1.1"
                                >
                                    <title>解决sop</title>
                                    <g id="页面-弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="新建/编辑FAQ（宽度720px）" transform="translate(-24, -785)">
                                            <g id="编组-6" transform="translate(24, 277)">
                                                <g id="解决sop" transform="translate(0, 508.5)">
                                                    <rect id="矩形" x="0" y="0" width="17" height="17" />
                                                    <g
                                                        id="编组"
                                                        transform="translate(3, 2)"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    >
                                                        <path
                                                            d="M10.5,0 L0.7,0 C0.3134005,0 0,0.3134005 0,0.7 L0,13.3 C0,13.68661 0.3134005,14 0.7,14 L10.5,14 C10.88661,14 11.2,13.68661 11.2,13.3 L11.2,0.7 C11.2,0.3134005 10.88661,0 10.5,0 Z"
                                                            id="路径"
                                                            stroke="#3875FF"
                                                            fill="#3875FF"
                                                            fill-rule="nonzero"
                                                        />
                                                        <line
                                                            x1="3.15"
                                                            y1="9.1"
                                                            x2="8.05"
                                                            y2="9.1"
                                                            id="路径"
                                                            stroke="#FFFFFF"
                                                        />
                                                        <line
                                                            x1="3.15"
                                                            y1="11.2"
                                                            x2="5.6"
                                                            y2="11.2"
                                                            id="路径"
                                                            stroke="#FFFFFF"
                                                        />
                                                        <polyline
                                                            id="路径"
                                                            stroke="#FFFFFF"
                                                            points="7.7 3.15 4.9 5.95 3.5 4.55"
                                                        />
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g></svg></div
                            >解决SOP和标准动作
                        </div>
                        <a-col :span="24">
                            <a-form-item
                                label="执行目标"
                                :rules="[{ required: true, message: '请输入执行目标', trigger: 'blur' }]"
                                name="executionTarget"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.executionTarget" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item
                                label="执行方案"
                                :rules="[{ required: true, message: '请输入执行方案', trigger: 'blur' }]"
                                name="plan"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.plan" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item
                                label="达成标准"
                                :rules="[{ required: true, message: '请输入达成标准', trigger: 'blur' }]"
                                name="reachStandard"
                            >
                                <a-textarea placeholder="请输入" v-model:value="faqState.faqModel.reachStandard" />
                            </a-form-item>
                        </a-col>
                        <!--      解决SOP和标准动作-->
                    </a-form>
                </div>
            </a-modal>
            <div class="search-div">
                <a-form :model="faqState.searchForm" ref="ptSearchRef">
                    <a-row :gutter="24" style="height: 32px">
                        <a-col :span="6" style="height: 32px; margin-top: 20px">
                            <a-form-item label="项目阶段">
                                <a-select
                                    show-search
                                    placeholder="请选择"
                                    @focus="getMilepostList"
                                    v-model:value="faqState.searchForm.milepostName"
                                    :options="faqState.searchMileList"
                                    :field-names="{ label: 'stageName', value: 'serialNumber' }"
                                    @change="milepostChange"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" style="height: 32px; margin-top: 20px">
                            <a-form-item label="任务名称">
                                <a-select
                                    show-search
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    allow-clear
                                    @focus="getTaskList"
                                    v-model:value="faqState.searchForm.taskName"
                                    :options="faqState.searchTaskList"
                                    :field-names="{ label: 'taskName', value: 'serialNumber' }"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="3" style="height: 32px; margin-top: 20px"
                            ><a-space
                                ><a-button type="primary" @click="getData">查询</a-button>
                                <a-button type="default" @click="resetData">重置</a-button></a-space
                            ></a-col
                        >
                    </a-row>
                </a-form>
            </div>
            <div class="kb-page">
                <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="24" @change="tabChange(activeKey)">
                    <a-tab-pane key="11012" tab="55家新水泥配料" />
                    <a-tab-pane key="11011" tab="水泥配料" />
                </a-tabs>
                <div class="template-title">
                    <div><span class="title-font">FAQ列表</span></div>
                    <div style="position: relative; top: -8px">
                        <a-button class="vid_hwx83rvzpu" :type="'primary'" @click="handle_vid_hwx83rvzpu_click">
                            <template #icon><user-outlined /></template>

                            我的
                        </a-button>
                        <!-- end vid_hwx83rvzpu 我的 -->
                        <!-- begin vid_eaymhbrupq 审批 -->
                        <a-button class="vid_eaymhbrupq" :type="'primary'" @click="handle_vid_eaymhbrupq_click">
                            <template #icon><file-done-outlined /></template>

                            审批
                        </a-button>
                    </div>
                </div>
                <div class="default-table">
                    <a-table
                        :columns="vid_83pyzibj9o_columns"
                        :data-source="faqState.dataSource"
                        bordered
                        :pagination="pagination"
                        @resizeColumn="handleTaskResizeColumn"
                    >
                        <template #bodyCell="{ record, text, column }">
                            <template v-if="column.dataIndex === 'opration'">
                                <a-button type="link" size="small" @click="showEdit(record)">编辑</a-button>
                                <a-popconfirm title="确定要删除吗？" @confirm="handleDeleteFaq(record)">
                                    <a-button type="link" size="small">删除</a-button>
                                </a-popconfirm>
                                <a-button type="link" size="small" @click="showPraise(record)">点赞</a-button>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
            <a-modal :visible="praiseVisible" @cancel="praiseVisible = false" width="300px" centered title="点赞" @ok="confirmPraise">
                是否确认为该条FAQ点赞？
            </a-modal>
            <!-- end vid_hludvvyuwr 自定义模板_e9v1m4bggb -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        processInstanceId: {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        processInstanceId: props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const activeKey = ref('11012')
    const pagination = reactive({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0,
        onShowSizeChange: pageSizeChange,
        onChange: pageChange
    })
    function pageSizeChange(current, size) {
        pagination.current = current
        pagination.pageSize = size
        getTable()
        getCount()
    }
    function handleTaskResizeColumn(w, col) {
        col.width = w
    }
    function pageChange(page, pageSize) {
        pagination.current = page
        pagination.pageSize = pageSize
        getTable()
        getCount()
    }
    const faqState = reactive({
        searchForm: {
            milepostName: undefined,
            taskName: undefined
        },
        searchTaskList: [],
        searchMileList: [],
        visible: false,
        modalTitle: '新建FAQ',
        faqModel: {
            templateCode: undefined,
            stageSerialNumber: undefined,
            taskSerialNumber: undefined,
            discoveredBy: undefined,
            phenomenon: undefined,
            result: undefined,
            phenomenonReason: undefined,
            possibleReason: undefined,
            reasonFeature: undefined,
            executionTarget: undefined,
            plan: undefined,
            reachStandard: undefined
        },
        templateList: [],
        miltpostList: [],
        taskList: [],
        isEdit: false,
        editId: undefined,
        dataSource: []
    })

    const vid_83pyzibj9o_columns = ref([
        {
            title: '项目阶段',
            dataIndex: 'stageName',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '任务',
            dataIndex: 'taskName',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '审阅人',
            dataIndex: 'custom7',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '审阅状态',
            dataIndex: 'approveDescription',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '收录人',
            dataIndex: 'createdBy',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '标签',
            dataIndex: 'custom8',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '点赞',
            dataIndex: 'praiseNumber',
            ellipsis: true,
            resizable: true,
            width: 180
        },
        {
            title: '问题现象',
            ellipsis: true,
            resizable: true,
            children: [
                {
                    title: '分类',
                    dataIndex: '',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                },
                {
                    title: '难度级别',
                    dataIndex: '',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                },
                {
                    title: '项目发现方',
                    dataIndex: 'discoveredBy',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                },
                {
                    title: '具体现象',
                    dataIndex: 'phenomenon',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                },
                {
                    title: '导致结果',
                    dataIndex: 'result',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                }
            ]
        },
        {
            title: '可能原因',
            ellipsis: true,
            resizable: true,
            children: [
                {
                    title: '原因产生方',
                    dataIndex: 'phenomenonReason',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                },
                {
                    title: '可能原因',
                    dataIndex: 'possibleReason',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                },
                {
                    title: '原因特征',
                    dataIndex: 'reasonFeature',
                    ellipsis: true,
                    resizable: true,
                    width: 180
                }
            ]
        },
        {
            title: '解决SOP和标准动作',
            ellipsis: true,
            resizable: true,
            children: [
                {
                    title: '执行目标',
                    dataIndex: 'executionTarget',
                    ellipsis: true,
                    resizable: true,
                    width: 350
                },
                {
                    title: '执行方案',
                    dataIndex: 'plan',
                    ellipsis: true,
                    resizable: true,
                    width: 500
                },
                {
                    title: '达成标准',
                    dataIndex: 'reachStandard',
                    ellipsis: true,
                    resizable: true,
                    width: 350
                }
            ]
        },
        {
            title: '操作',
            dataIndex: 'opration',
            width: 150,
            fixed: 'right'
        }
    ])
    /**
     * 处理元素 按钮 的 click 事件
     */
    let handle_vid_eaymhbrupq_click = throttle(async (...params) => {
        response_oibu42u3mt()
    }, 500)
    // 页面交互 我的FAQ
    const response_iayvrfhlqv = async () => {
        const query = {}
        let appBaseUrl = ''
        /*** PUBLISH_EXEGESIS ***
       appBaseUrl = getAppBaseUrl()
       *** PUBLISH_EXEGESIS ***/
        const jumpInfo = {
            path: `${appBaseUrl}/app_50000005/page/3000000601`, // 跳转地址
            query
        }
        const routeUrl = router.resolve(jumpInfo)
        let url = routeUrl.href
        // 判断是否是MicroApp的子应用
        const microAppData = window.microApp?.getData() ?? window.eventCenterForViteApp?.getData()
        if (microAppData) {
            const urlList = []
            Object.keys(jumpInfo.query).forEach(item => {
                urlList.push(item + '=' + jumpInfo.query[item])
            })
            // 判断要跳转的地址是否是用户自定义输入的
            const customJumpPath = jumpInfo.path

            // 自定义跳转页面不是其他平台的菜单，则直接使用全路径
            if (customJumpPath.indexOf('/allin-app/') !== -1) {
                // 目标页面是其他平台的菜单
                const realPath = customJumpPath.split('/allin-app/').pop()
                // 兼容二级域名情况
                let jumpPath = (microAppData.baseroute ?? '/allin-app') + '/' + realPath
                // 配置有参数，需要加参数添加到路由后面
                if (urlList.length) {
                    // 跳转的路径本身带有参数
                    if (jumpPath.indexOf('?') !== -1) {
                        jumpPath += '&' + urlList.join('&')
                    } else {
                        jumpPath += '?' + urlList.join('&')
                    }
                }
                url = location.origin + jumpPath
            } else {
                // 目标页面就是低代码项目本身的页面
                if (location.href.indexOf('/allin-app/') > -1) {
                    url = location.origin + location.pathname.split('/allin-app/').shift() + '/allin-app' + url
                } else {
                    url = location.origin + '/allin-app' + url
                }
            }
        }
        // 打开新窗口

        if (microAppData) {
            window.location.href = url
        } else {
            router.push(jumpInfo)
        }
    }

    // 页面交互 FAQ新建审批
    const response_oibu42u3mt = async () => {
        const query = {}
        let appBaseUrl = ''
        /*** PUBLISH_EXEGESIS ***
       appBaseUrl = getAppBaseUrl()
       *** PUBLISH_EXEGESIS ***/
        const jumpInfo = {
            path: `${appBaseUrl}/app_50000005/page/3000000602`, // 跳转地址
            query
        }
        const routeUrl = router.resolve(jumpInfo)
        let url = routeUrl.href
        // 判断是否是MicroApp的子应用
        const microAppData = window.microApp?.getData() ?? window.eventCenterForViteApp?.getData()
        if (microAppData) {
            const urlList = []
            Object.keys(jumpInfo.query).forEach(item => {
                urlList.push(item + '=' + jumpInfo.query[item])
            })
            // 判断要跳转的地址是否是用户自定义输入的
            const customJumpPath = jumpInfo.path

            // 自定义跳转页面不是其他平台的菜单，则直接使用全路径
            if (customJumpPath.indexOf('/allin-app/') !== -1) {
                // 目标页面是其他平台的菜单
                const realPath = customJumpPath.split('/allin-app/').pop()
                // 兼容二级域名情况
                let jumpPath = (microAppData.baseroute ?? '/allin-app') + '/' + realPath
                // 配置有参数，需要加参数添加到路由后面
                if (urlList.length) {
                    // 跳转的路径本身带有参数
                    if (jumpPath.indexOf('?') !== -1) {
                        jumpPath += '&' + urlList.join('&')
                    } else {
                        jumpPath += '?' + urlList.join('&')
                    }
                }
                url = location.origin + jumpPath
            } else {
                // 目标页面就是低代码项目本身的页面
                if (location.href.indexOf('/allin-app/') > -1) {
                    url = location.origin + location.pathname.split('/allin-app/').shift() + '/allin-app' + url
                } else {
                    url = location.origin + '/allin-app' + url
                }
            }
        }
        // 打开新窗口

        if (microAppData) {
            window.location.href = url
        } else {
            router.push(jumpInfo)
        }
    }
    const faqRef = ref(null)

    function handlerConfirm() {
        if (faqState.isEdit) {
            //   编辑保存
            faqRef.value.validate().then(() => {
                const { modifiedTime, createdTime, ...dataToSave } = faqState.faqModel
                put(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/modify`, dataToSave).then(data => {
                    if (data.code === 200) {
                        message.success('修改成功')
                        faqState.visible = false
                        faqState.faqModel = {
                            templateCode: undefined,
                            stageSerialNumber: undefined,
                            taskSerialNumber: undefined,
                            discoveredBy: undefined,
                            phenomenon: undefined,
                            result: undefined,
                            phenomenonReason: undefined,
                            possibleReason: undefined,
                            reasonFeature: undefined,
                            executionTarget: undefined,
                            plan: undefined,
                            reachStandard: undefined
                        }
                        dataConnector_conn_bsus0hdxfi()
                        dataConnector_conn_a5p5gzqpej()
                    } else {
                        message.error(data.message)
                    }
                })
            })
        } else {
            //   新建保存
            faqRef.value.validate().then(() => {
                post('/solution-ppm/api/v2/built-in-system-ppm/task/faq/create', faqState.faqModel).then(data => {
                    if (data.code === 200) {
                        message.success('新建成功')
                        faqState.visible = false
                        faqState.faqModel = {
                            templateCode: undefined,
                            stageSerialNumber: undefined,
                            taskSerialNumber: undefined,
                            discoveredBy: undefined,
                            phenomenon: undefined,
                            result: undefined,
                            phenomenonReason: undefined,
                            possibleReason: undefined,
                            reasonFeature: undefined,
                            executionTarget: undefined,
                            plan: undefined,
                            reachStandard: undefined
                        }
                        dataConnector_conn_bsus0hdxfi()
                        dataConnector_conn_a5p5gzqpej()
                    } else {
                        message.error(data.message)
                    }
                })
            })
        }
    }

    function showEdit(record) {
        faqState.modalTitle = '编辑FAQ'
        faqState.isEdit = true
        const oldData = cloneDeep(record)
        faqState.faqModel = oldData
        faqState.faqModel.templateCode = oldData.templateId
        getTemplate()
        getMilepost()
        getTask()
        faqState.visible = true
    }
    const praiseVisible = ref(false)
    const praiseId = ref(null)
    function showPraise(record) {
        praiseVisible.value = true
        praiseId.value = record.questionId
    }
    function confirmPraise() {
        put(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/praise/${praiseId.value}`).then(Data => {
            if (Data.code !== 200) {
                message.error(Data.message)
                return
            }
            message.success('点赞成功')
            praiseVisible.value = false
            gifVisible.value = true
            getTable()
            getCount()
        })
    }
    function handleDeleteFaq(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/delete/${record.questionId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success('删除成功')
            getTable()
            getCount()
        })
    }

    function faqCancel() {
        faqState.visible = false
        faqState.faqModel = {
            templateCode: undefined,
            stageSerialNumber: undefined,
            taskSerialNumber: undefined,
            discoveredBy: undefined,
            phenomenon: undefined,
            result: undefined,
            phenomenonReason: undefined,
            possibleReason: undefined,
            reasonFeature: undefined,
            executionTarget: undefined,
            plan: undefined,
            reachStandard: undefined
        }
    }

    function getTemplate() {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/template/list', { templateName: '' }).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            faqState.templateList = data.data
        })
    }

    function getMilepost() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/project/template/${faqState.faqModel.templateCode}/stage/list`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            faqState.miltpostList = data.data
        })
    }

    function getTask() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/project/template/${faqState.faqModel.templateCode}/stage/${faqState.faqModel.stageSerialNumber}/detail_list`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            faqState.taskList = data.data
        })
    }

    function showCreate() {
        faqState.visible = true
        faqState.isEdit = false
        faqState.modalTitle = '新建FAQ'
    }

    get('/config.json').then(data => {
        gifSrc.value = data.faqImagePath
    })
    const gifVisible = ref(false)
    const gifSrc = ref('')
    // 假设GIF的播放时长为3秒
    const gifDuration = 2500

    const onGifLoad = () => {
        // 设定一个定时器在GIF播放结束后隐藏遮罩
        setTimeout(() => {
            gifVisible.value = false
        }, gifDuration)
    }
    function getTable() {
        const params = {
            pageNo: pagination.current,
            taskSerialNumber: faqState.searchForm.taskName,
            pageSize: pagination.pageSize,
            stageSerialNumber: faqState.searchForm.milepostName,
            templateCode: activeKey.value
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/task/faq/search', params).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            faqState.dataSource = data.data
        })
    }
    function getCount() {
        const params = {
            pageNo: pagination.current,
            taskSerialNumber: faqState.searchForm.taskName,
            pageSize: pagination.pageSize,
            stageSerialNumber: faqState.searchForm.milepostName,
            templateCode: activeKey.value
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/task/faq/count', params).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            pagination.total = data.data
        })
    }
    getTable()
    getCount()
    function tabChange() {
        getTable()
        getCount()
    }
    function getData() {
        getTable()
        getCount()
    }
    function resetData() {
        pagination.current = 1
        faqState.searchForm = {
            milepostName: undefined,
            taskName: undefined
        }
        getTable()
        getCount()
    }
    function getMilepostList() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/project/template/${activeKey.value == '11011' ? 1 : 5}/stage/list`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            faqState.searchMileList = data.data
        })
    }
    function getTaskList() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/project/template/${activeKey.value == '11011' ? 1 : 5}/stage/${
                faqState.searchForm.milepostName
            }/detail_list`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            faqState.searchTaskList = data.data
        })
    }
    function milepostChange() {
        faqState.searchForm.taskName = undefined
    }
    function faqTpChange() {
        faqState.faqModel.stageSerialNumber = undefined
      faqState.faqModel.taskSerialNumber = undefined
    }
    function faqMlChange() {
        faqState.faqModel.taskSerialNumber = undefined
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .search-div {
        background-color: #fff;
        margin-bottom: 16px;
        height: 72px;
        padding: 0 20px;
        border-radius: 6px;
    }
    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
    }
    .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }
    .kb-page {
        padding: 0 20px 20px 20px;
        height: 100%;
        position: relative;
        background-color: #fff;
        border-radius: 6px;
    }
    .template-title {
        margin-top: 10px;
        padding-left: 8px;
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        border-left: 4px solid #3875ff;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .title-font {
        font-weight: 600;
    }
    .vid_hwx83rvzpu {
        margin-right: 16px;
    }
    .faq-title {
        display: flex;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #262626;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .my-page :deep(.ant3-form-item-label) {
        width: 100px;
    }
    .faq-item {
        border: 1px solid #3875ff;
    }
    .faq-item:nth-last-child(-n + 2) {
        border-top: none;
    }
    .sop-img,
    .question-img,
    .reson-img {
        height: 14px;
        width: 14px;
        background-size: cover;
        margin-top: 6px;
        margin-right: 4px;
    }
    .line-box {
        border-top: 1px solid #9bbaff;
        margin-bottom: 10px;
    }
    .fullscreen-animation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        z-index: 1000; /* 确保在最上层 */
    }

    .fullscreen-animation img {
        width: 320px;
        height: 320px;
    }
</style>
